<template>
  <div>
    <el-dialog title="校友信息" :visible.sync="dialogFormVisible" :loading="loading" width="800px">
      <el-form :model="user" :rules="rules">
        <el-form-item label="校友编号" :label-width="formLabelWidth" prop="userId">
          <el-input v-model="user.userId" autocomplete="off" :readonly="readonly" />
        </el-form-item>
        <el-form-item label="校友姓名" :label-width="formLabelWidth" prop="userInfo.userName">
          <el-input v-model="user.userInfo.userName" autocomplete="off" :readonly="readonly" />
        </el-form-item>
        <el-form-item label="校友性别" :label-width="formLabelWidth" prop="userInfo.userSex">
          <el-radio-group v-model="user.userInfo.userSex" :readonly="readonly">
            <el-radio label="男" />
            <el-radio label="女" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="校友生源地" :label-width="formLabelWidth" prop="userInfo.userOrigin">
          <el-input v-model="user.userInfo.userOrigin" autocomplete="off" :readonly="readonly" />
        </el-form-item>
        <el-form-item label="校友班级" :label-width="formLabelWidth" prop="userInfo.userClassName">
          <el-input v-model="user.userInfo.userClassName" autocomplete="off" :readonly="readonly" />
        </el-form-item>
        <el-form-item label="校友学部" :label-width="formLabelWidth" prop="userInfo.userPartName">
          <el-input v-model="user.userInfo.userPartName" autocomplete="off" :readonly="readonly" />
        </el-form-item>
        <el-form-item label="校友年级" :label-width="formLabelWidth" prop="userInfo.userLevel">
          <el-input v-model="user.userInfo.userLevel" autocomplete="off" :readonly="readonly" />
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth" prop="userInfo.userPhone">
          <el-input v-model="user.userInfo.userPhone" autocomplete="off" :readonly="readonly" type="number" />
        </el-form-item>
        <el-form-item label="电子邮箱" :label-width="formLabelWidth" prop="userInfo.userEmail">
          <el-input v-model="user.userInfo.userEmail" autocomplete="off" :readonly="readonly" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
        <el-button v-show="!readonly" type="warning" @click="changeConfirm()">修 改</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getUserInfoByUserId, updateUserInfo } from '../../api/userInfo.js'
export default {
  name: 'Info',
  components: 'Info',
  props: {
    userId: String,
    show: {
      default: false,
      require: true
    }
  },
  data() {
    return {
      user: {},
      loading: false,
      dialogFormVisible: false,
      formLabelWidth: '100px',
      title: '查看校友信息',
      readonly: true,
      rules: {
        userId: [{
          required: true,
          message: '校友编号不得为空',
          trigger: 'blur'
        }],
        userName: [{
          required: true,
          message: '校友姓名不得为空',
          trigger: 'blur'
        }],
        userSex: [{
          required: true,
          message: '校友性别不得为空',
          trigger: 'blur'
        }],
        userOrigin: [{
          required: true,
          message: '校友生源地不得为空',
          trigger: 'blur'
        }],
        userClassName: [{
          required: true,
          message: '校友班级名不得为空',
          trigger: 'blur'
        }],
        userPartName: [{
          required: true,
          message: '校友学部名不得为空',
          trigger: 'blur'
        }],
        userLevel: [{
          required: true,
          message: '校友级别不得为空',
          trigger: 'blur'
        }],
        userBirthday: [{
          required: true,
          message: '校友出生日期不得为空',
          trigger: 'blur'
        }],
        userPhone: [{
          required: true,
          message: '校友手机号不得为空',
          trigger: 'blur'
        }],
        userEmail: [{
          require: true,
          message: '邮箱不得为空',
          trigger: 'blur'
        },
        {
          type: 'email',
          message: '请填写正确的邮箱号',
          trigger: ['blur', 'change']
        }
        ]
      }
    }
  },
  create() {

  },
  watch: {},
  methods: {

    showInfo(userId) {
      this.title = '查看校友信息'
      this.readonly = true
      this.fetchData(userId)
    },
    editInfo(userId) {
      this.title = '修改校友信息'
      this.readonly = false
      this.fetchData(userId)
    },
    fetchData(userId) {
      this.loading = true
      getUserInfoByUserId(userId).then((data) => {
        this.user = data.obj
        console.log(data)
        console.log(this.user)
        this.loading = false
        this.dialogFormVisible = true
      })
    },
    changeConfirm() {
      this.$confirm('确定提交更改该校友的个人信息?').then(() => {
        console.log('提交更改')
        console.log(this.user)
        console.log(this.user.userBirthday)
        console.log(this.user.userClassName)
        updateUserInfo(this.user.userBirthday, this.user.userClassName, this.user.userEmail, this.user.userId, this.user.userLevel, this.user.userName, this.user.userOrigin, this.user.userPartName, this.user.userPhone, this.user.userSex, this.user.userUpdateTime).then((data) => {
          console.log(data)
          this.$message({
            showClose: true,
            message: '更改成功',
            type: 'success'
          })
        })
      })
    }
  }

}
</script>

<style scoped>

</style>
